<template>
	<view class="tabar">
		<block v-for="(it, index) in list" :key="index">
			<view class="tabar-i" :data-path="it.pagePath" :data-index="index" @click="switchTab">
				<image :src="select === index ? it.selectedIconPath : it.iconPath"></image>
				<text :style="{color: select === index ? selectedColor : color}">{{it.text}}</text>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: 'tab-bar',
		props: ['selected'],
		data() {
			return {
				select: this.selected,
				color: "#7A7E83",
				selectedColor: "#82d7d0",
				list: [{
						"pagePath": "../../pages/index/index",
						"iconPath": "../../static/tabar/tab1.png",
						"selectedIconPath": "../../static/tabar/tab10.png",
						"text": "首页"
					}, {
						"pagePath": "../../pages/hospital/index",
						"iconPath": "../../static/tabar/tab2.png",
						"selectedIconPath": "../../static/tabar/tab20.png",
						"text": "组件"
					}, {
						"pagePath": "../../pages/message/index",
						"iconPath": "../../static/tabar/tab3.png",
						"selectedIconPath": "../../static/tabar/tab30.png",
						"text": "信息"
					}, {
						"pagePath": "../../pages/celebrity/index",
						"iconPath": "../../static/tabar/tab4.png",
						"selectedIconPath": "../../static/tabar/tab40.png",
						"text": "组件"
					}, {
						"pagePath": "../../pages/mine/index",
						"iconPath": "../../static/tabar/tab5.png",
						"selectedIconPath": "../../static/tabar/tab50.png",
						"text": "我的"
				}]
			}
		},
		methods: {
			switchTab(e) {
				const data = e.currentTarget.dataset, url = data.path;
				uni.switchTab({url})
			}
		}
	}
</script>

<style>
	.tabar {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  height: 48px;
	  border-top: 1px solid #ddd;
	  background: #fff;
	  display: flex;
	  padding-bottom: env(safe-area-inset-bottom);
	  z-index: 116;
	}
	.tabar-i {
	  flex: 1;
	  text-align: center;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-direction: column;
	}
	.tabar-i image {width: 27px; height: 27px;}
	.tabar-i text {font-size: 10px;}
</style>